<template>
    <el-container class="w-body">
        <el-header class="w-bg">
            <div class="w-header">
                <div class="w-user">
                    <!-- 用户名 -->
                    <el-avatar :src=avatar></el-avatar>{{ user }}
                </div>
                <div class="w-progress">
                    <div class="w-pro-box w-pro-row">
                        <!-- 个人总完成量 -->
                        <el-tag>完成总量</el-tag>
                        &nbsp;&nbsp;&nbsp;
                        <span>{{ userCount.totalNum }}</span>
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <div class="w-pro-box w-pro-row">
                        <!-- 总页数 -->
                        <el-tag type="success">总页数</el-tag>
                        &nbsp;&nbsp;&nbsp;
                        <span>{{ userCount.max }}</span>
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <div class="w-step" v-if="max < 50">
                        <el-steps :space="200" :active="page-1">
                            <el-step v-for="(item,index) in max" :key="index"></el-step>
                        </el-steps>
                    </div>
                </div>
            </div>
        </el-header>
        <el-divider></el-divider>
        <el-main class="data ele-scrollbar">
            <div class="main">
                <div class="empty" v-if="userCount.max == 0">
                    <el-empty description="暂无数据"></el-empty>
                </div>
                <el-container v-for="(item, index) in tableData" :key="index" class="card">
                    <el-card class="box-card">
                        <el-table :data="item" size="small" v-loading="loading[index]">
                            <el-table-column label="监控测点名称" prop="newName">
                            </el-table-column>
                            <el-table-column label="设备类型">
                                <template slot-scope="scope">
                                    <el-autocomplete class="inline-input" v-model="scope.row.newNameKey"
                                        :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false"
                                        clearable @select="handleSelect"></el-autocomplete>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-container>
            </div>
            <div class="submit" v-if="userCount.max > 0">
                <el-button type="success" round @click="pre()" :disabled="isSubmit" icon="el-icon-back">上一页</el-button>
                &nbsp;&nbsp;&nbsp;
                <el-button type="success" round @click="next()" :disabled="isSubmit" icon="el-icon-right">下一页
                </el-button>
                &nbsp;&nbsp;&nbsp;
                <el-input v-model="page" placeholder="请输入页码" class="page"></el-input>
                &nbsp;&nbsp;
                <el-button type="success" round @click="go()" :disabled="isSubmit" icon="el-icon-s-promotion">跳转
                </el-button>
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                <el-button type="primary" round @click="update()" :disabled="isSubmit" icon="el-icon-finished">提交本页数据
                </el-button>
                &nbsp;&nbsp;&nbsp;
                <el-button type="danger" plain @click="exit()" :disabled="isSubmit" icon="el-icon-circle-close">退出系统
                </el-button>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import * as echarts from "echarts";
import "@/assets/css/scrollbar.css";
import { length } from "css-tree/lib/lexer/generic";
import { match } from "minimatch";
const axios = require("axios");
export default {
    name: "device",
    data() {
        return {
            //用户统计
            userCount: {
                totalNum: 0,
                max: 0
            },
            //用户
            user: localStorage.getItem("user"),
            //随机头像
            avatar: "https://api.multiavatar.com/" + localStorage.getItem("user") + ".png",
            //当前页
            page: 1,
            //最大页数
            max: 1,
            //提交按钮置灰
            isSubmit: false,
            // 数据
            tableData: [[], [], [], [], []],
            // 加载蒙版
            loading: [false, false, false],
        }
    },
    mounted() {
        const _this = this;
        _this.getdata(_this.page);
    },
    methods: {
        pre() {
            const _this = this;
            if (_this.page == 1) {
                this.$message.error('已经是第一页了!');
                return;
            }
            _this.getdata(_this.page - 1);
        },
        getdata(page) {
            const _this = this;
            _this.isSubmit = true;
            //加载第一页
            axios
                .get("/ylj/api/getDoneData?user=" + _this.user + "&page=" + page)
                .then(function (response) {
                    let r = response.data.data.data;
                    console.log(r);
                    _this.tableData = r.list;
                    _this.page = r.page;
                    _this.max = r.max;
                    _this.userCount.max = r.max;
                    _this.userCount.totalNum = r.totalNum;
                    _this.$notify({
                        message: "数据已加载!",
                        type: "success",
                    });
                });
            _this.isSubmit = false;
        },
        next() {
            const _this = this;
            if (_this.page >= _this.max) {
                this.$message.error('已经是最后一页了!');
                return;
            }
            _this.getdata(_this.page + 1);
        },
        go() {
            const _this = this;
            if (_this.page >= _this.max) {
                this.$message.error('哪有那么多页!');
                return;
            }
            _this.getdata(_this.page);
        },
        async update() {
            let _this = this;
            if (_this.tableData[0].length == 0) {
                this.$notify({
                    message: "无数据需要更新!",
                    type: "error",
                });
                return;
            }
            _this.isSubmit = true;
            //提交是否正常
            let flag = true;
            for (let i = 0; i < _this.tableData.length; i++) {
                await axios
                    .post("/ylj/api/submit?user=" + _this.user + "&update=true", _this.tableData[i])
                    .then(function (response) {
                        let code = response.data.code;
                        if (code != 200) {
                            flag = false;
                        }
                    });
            }
            if (flag) {
                this.$notify({
                    message: "更新成功!",
                    type: "success",
                });
            }
            if (_this.page < _this.max)
                _this.next();
            _this.isSubmit = false;
        },
        exit() {
            let _this = this;
            _this.$confirm("即将退出系统, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    //退回到登录页
                    _this.$router.push("/");
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消退出",
                    });
                });
        },
        //搜索建议
        querySearch(queryString, cb) {
            if (queryString) {
                axios
                    .get("/ylj/api/search/" + queryString)
                    .then(function (response) {
                        let code = response.data.code;
                        if (code == 200) {
                            let r = response.data.data;
                            //回调填充结果
                            cb(r);
                        }
                    });
            }
        },
        //选择
        handleSelect(item) {
        },
    }
}

</script>


<style>
.device {
    height: 900px;
    overflow-y: auto;
}

.empty{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.w-body {
    height: 100%;
}

.w-bg {
    background-color: aliceblue !important;
    height: 20px !important;
}

.w-header {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.w-user {
    font-family: "Courier New", Courier, monospace;
    font-size: 20px;
    width: 10%;
}

.w-progress {
    width: 80%;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.w-step{
    width: 90%;
}

.el-progress {
    display: flex;
    align-items: center;
}

.w-pro-main {
    width: 60%;
}

.w-pro-box {
    width: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.count {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.page {
    width: 60px !important;
}

.data {
    height: 100%;
}

.main {
    display: flex;
    flex-direction: row;
}

.card {
    height: 100%;
    width: 30%;
    margin: 0 5px 0 5px;
}

.box-card {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.submit {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trend {
    height: 700px;
    width: 100%;
}

.rank {
    height: 700px;
    width: 100%;
}

.pie {
    height: 700px;
    width: 100%;
}
</style>